<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>                                                           
			<div id="pageId" class="box-footer clearfix" dm="100" 
					><!-- 到page  inser包含  class下一页 -->
			  						<!--  分页位置        	碎片:一个屏幕的多个部分 -->
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box --> 
	</div>
</div>
<script type="text/javascript">
//用户名查询
   /* JS 问题如何解决? console.log(),debugger,排除法 */
   //$("#pageId").load("doPageUI");
   $(function(){
	 $("#pageId").load("doPageUI",doGetObjects); 
	 //doGetObjects();
	 $(".input-group-btn")
	 .on("click","btn-serach",doQueryObjects);
   })
   
   //处理删除结果
   function doHandleDeleteResult(result){
	   if(result.state==1){
		   alert(result.message);
		   doRefreshAfterDelete();
	   }else{
		   alert(result.message);
	   }
   }
   function doRefreshAfterDelete(){
	   var checkAll=$("#checkAll").prop("checked");
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   var checked=$("#checkAll").prop("checked");
	   if(checkAll&&pageCurrent==pageCount&&pageCount>1){}
	   pagrCurrent--;
	   $("#pageId").data("pageCurrent",pageCurrent);
	   
   }
   doGetObjects();
   $(".input-group-btn")
   		.on("click",".btn-delete",doDeleteObjects)
   function doDeleteObjects(){
	   //1获取选中的id值
	   var ids=doGetCheckdIDs();
	   if(ids.length==0){
		   alert("至少选择一个");
		   return;
	   }
	   //2发布请求执行删除操作
	   var url="log/doDeleteObjects";
	   var params={"ids":ids.toString()};
	   console.log(params);
	   $.post(url,params,function(result){
		   if(result.state==1){
			   alert(result.message);
			   doGetObjects();
		   }else{
			   alert(result.message);
		   }
	   });
   }
   function doGetCheckedIds(){
	   //定义一个数组,用于存储选中的checkbox的id值
	   var array=[];
	   //获取tbody中所有类型伟checkbox的input元素
	   $("#tbodyId input[type=checkox]").
	   //每发现一个元素都会执行如下回调函数
	   each(function(){
		   if($(this.prop("checked")){
			   //调用数组对象的push方法将选中的值存储到数组
			   array.push($(this).val());
		   }
	   })
			   return array;
   }
 //处理thead中checkbox对象的事件
   function doChangeTHeadCheckBoxState(){
	   //1.获取当前点击对象的checked属性的值
	   var flag=$(this).prop("checked");//true or false
	   //2.将tbody中所有checkbox元素的值都修改为flag对应的值
	   //第一方案
	   /*$("#tbodyId input[name='cItem']")
	   .each(function(){
		   $(this).prop("checked",flag);
	   })
	   */
	   //第二方案
	   $("#tbodyId input[type='checkbox']")
	   .prop("checked",flag);
	   
   }
 function doChangeTHeadCheckBoxState(){
	 //1.设置默认值
	 var flag=true;
	 //2.所有tbody中的checkbox值并进行操作
	 $("#tbodyId input[type='checkbox']")
	 .each(function(){
		 flag=flag&$(this).prop("vhecked")
	 });
	 //3.修改全元素checkbox的值为flag
	 $("#checkAll").prop("checked",flag);
 }
 //第六完善业务刷方法,当再最后一页执行删除操作时,基于全按钮及当前页码值
 fun
 	//第五步:Tboy中
   //基于参数查询日志信息
   function doQueryObjects(){
	   //回到第一页查找
	   $("#pageId").data("pageCurrent",1);
	   //1获取参数
	   /* var params="username="+$("#searchNameId").val()+"&pageCurrent=1"; */
	   doGetObjects();
	   
	   //事件参数查询日志信息
	   $(".input-group-btn")
	   .on("click",".btn-searvh",doQueryObjects)
	   .on("click",".btn-searvh",doQueryObjects)
	   ///thread中checkbox
	   $("#checkAll").change(doChangeTBodyCheckBoxState);
	   //tbod中checkbox对象事件注册
	   $("#tbodyId").on("change","input:checkbox",doChangeTHeadCheckBoxState);
	   
   }
   
   function doGetCheckedIds(){
	   //1定义数组
	   var idArray=[]
	   //2.所有选中的checkbox对象
	   $("")
	   $("#tbodyId inputt:checkbox:checked")
	   .each(function(){
		  
	   })
   }
   //定义删除事件
   function doDelectObjects(){
	   //获取选中的id
	   var ids=dogetCheckedIds();/通过此函数返回一个数组,数组中存储的是选中的
	   if(ids.length==0){
		   alert("请求选择");
		   return;
	   }
	   if(!confirm("确认删除吗"))return;
	   //2,构建参数对象
	   var params={"ids":idArray.toString};//tostring会自动解析
	   //3.定义删除操作的url
	   const url="log/doDelecObjects";
	   //4.发送异步请求执行删除操作,并刷新页面
	   $.post(url.params,function(result){
		   if(result.state==1){
			   alert(result.message);
			   doGetObjects();
		   }else{
			   alert(result.message);
		   }
	   });
	   
   }
   //通过此函数异步加载服务端的日志信息
   function doGetObjects(){
	   //1定义请求参数
	   var pageCurrent=$("#pageId").data("pageCurrent");
	   if(!pageCurrent)pageCurrent=1;
		var uname=$("#searchNameId").val();
	   //let params="pageCurrent="+pageCurrent;
		//参数封装方法1;
		/* if(uname)params=params+"&username="+uname; */
		//参数封装方法2
		let params={"pageCurrent":pageCurrent};//json
		if(uname)params.username=uname;
	   //2定义请求url
	   const url="log/doFindPageObjects";
	   //3.发送异步请求并处理相应结果
	   //也可以按照如下结构进行异步请求
	   //$.getJSON(url,params,doHandleQueryResult)
	   $.getJSON(url,params,function(result){
		   doHandleQueryResult(result);
	   })
	   function doHandleQueryResult(result){
		   //普通日志
		   console.log("result",result)
		   //警告错误
		   //console.log()
		   if(result.state==1){
			   //呈现当前页的日志信息
			   //console.log(result.data.records)
			   //将分页信息更新到页面上
			   doSetTableBodyRows(result.data.records);
			   //第二步:将分页信息更新到页面上()
		   }else{
			   alert(result.message);
		   }
		   }
		   function doSetTableBodyRows(records){  //list<SysLog>
			   //1获取tbody对象并清空内容
		   var tBody=$("#tbodyId")
		   //2遍历records并将结果更新到页面上
		   
		   //for(let i in records){
			   //构建一行tr
			   //console.log(array[i]); 优势:可读性好     劣势:代码量大 性能不太好   i的作用域不严谨
			   records.forEach(record=>tBody.append(doCreateTds(record)))
			   /* var tr=$("<tr></tr>");
			   var tds=doCreateTds(records[i]);
			   tr.append(tds);
			   tBody.append(tr); */
		  // }
	   }
	   //创建每行的td元素,并填充具体的业务
	   function doCreateTds(data){
		   var tds="<tr><td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"+
		   "<td>"+data.username+"</td>"+
		   "<td>"+data.operation+"</td>"+
		   "<td>"+data.method+"</td>"+
		   "<td>"+data.params+"</td>"+
		   "<td>"+data.time+"</td>"+
		   "<td>"+data.ip+"</td></tr>";
	  return tds;
	   }
   }
</script>






